<template>
	<template v-if="isMember && isLogin">
		<v-header></v-header>
		<v-aside></v-aside>
		<v-container></v-container>

		<v-setting v-model="settingVisible"></v-setting>
		<search-bar></search-bar>
		<div class="watermark" v-if="settingStore.watermark.visible" :style="[watermarkStyle]"></div>
	</template>
	<template v-if="!isMember && !showLogin">
		<RouterView v-slot="{ Component, route }">
			<template v-if="Component">
				<component :is="Component" :key="route.path + route.name + refreshFlag"></component>
			</template>
		</RouterView>
	</template>
	<transition name="fade">
		<v-login v-if="!isLogin"></v-login>
	</transition>
</template>

<script setup>
import { computed } from "vue"
import { useRoute } from "vue-router"

import { useSettingStore } from "/store/setting"
import { useUserInfoStore } from "/store/userInfo"
import { useMenuStore } from "/store/menu"

import VHeader from "./header/index.vue"
import VAside from "./aside/index.vue"
import VContainer from "./container/index.vue"
import VSetting from "../setting/index.vue"
import SearchBar from "../search-bar/index.vue"
import VLogin from "../login/index.vue"

const settingStore = useSettingStore()
const userInfoStore = useUserInfoStore()
const menuStore = useMenuStore()
const route = useRoute()
const showLogin = ref(false)
const refreshFlag = ref(0)

provide("toLogin", () => {
	showLogin.value = true
})

const watermarkStyle = computed(() => {
	return {
		background: `url(${settingStore.watermark.content}) repeat`,
	}
})

const settingVisible = computed({
	get: () => settingStore.visible,
	set: value => (settingStore.visible = value),
})
const isMember = computed(() => /^\/userInfo/.test(route.path))
const isLogin = computed(() => {
	if (showLogin.value) {
		return false
	}
	if (!isMember.value) {
		return true
	}
	return userInfoStore.isLogin
})

const nowRouteInMenu = menuStore.findInMenuList(route.path)
if (nowRouteInMenu) {
	menuStore.nowCurrent = nowRouteInMenu.parent.indexs[1]
}

watch(
	() => route.path,
	() => {
		showLogin.value = false
	}
)
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
</style>
